<template>
	<div class="showZoomLatLng">
		<span>地图级别：{{bottomBar.zoom}}</span>
		<span>经纬度：{{bottomBar.latlng.lng}} , {{bottomBar.latlng.lat}}</span>
	</div>
</template>

<script>
	export default{
		props:['BM', 'map'],
		data(){
			return{
				bottomBar: {
					latlng: '',
					zoom: '4'
				}
			}
		},
		mounted() {
			this.getMapCenterLatLng()
			this.getZoomAndLatLng()
		},
		methods:{
			getMapCenterLatLng: function(){
				// 初始化右下角经纬度
				let latlng = this.map.getCenter()
				latlng.lat = latlng.lat.toFixed(8)
				latlng.lng = latlng.lng.toFixed(8)
				this.bottomBar.latlng = latlng
			},
			getZoomAndLatLng: function(){
				let that = this
				this.map.on('mousemove', (e)=>{
					let latlng = e.latlng
					latlng.lat = latlng.lat.toFixed(8)
					latlng.lng = latlng.lng.toFixed(8)
					this.bottomBar.latlng = latlng
				})
				this.map.on('zoomend', function(e){
					that.bottomBar.zoom = this.getZoom()
					// console.log(this.getZoom())
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.showZoomLatLng{
		position: fixed;
		display: flex;
		justify-content: space-around;
		right: 10px;
		bottom: 10px;
		background: #E7E9F1;
		padding: 2px 10px;
		z-index: 9;
	}
	.showZoomLatLng span{
		margin-right: 20px;
	}
</style>
